{php $newUI = true;}
{template 'common/header'}
<script type="text/javascript">
	require(['angular', 'jquery.ui', 'underscore', 'util'], function(angular, $, _, util){
		angular.module('app', []).controller('menuDesigner', function($scope, $http){
			$scope.menus = {php echo json_encode($menus);};
			$scope.activeMenu = {};
			
			$scope.addMenu = function() {
				if($scope.menus.length >= 3) {
					return;
				}
				$scope.menus.push({
					title: '',
					type: 'url',
					url: '',
					forward: '',
					subMenus: []
				});
				$('.designer').sortable({handle: '.fa-arrows'});
			};
			$scope.addSubMenu = function(menu) {
				if(menu.subMenus.length >= 5) {
					return;
				}
				menu.subMenus.push({
					title: '',
					type: 'url',
					url: '',
					forward: ''
				});
				$('.designer').sortable({handle: '.fa-arrows'});
			};
			$scope.deleteMenu = function(menu, sub) {
				if(sub) {
					menu.subMenus = _.without(menu.subMenus, sub);
				} else {
					if(menu.subMenus.length > 0 && !confirm('将同时删除所有子菜单, 是否继续? ')) {
						return;
					}
					$scope.menus = _.without($scope.menus, menu);	
				}
			};
			$scope.setAction = function(menu) {
				$scope.activeMenu = menu;
				if(!$scope.activeMenu.url) {
					$scope.activeMenu.url = 'http://';
				}
				var header = "选择菜单 【{{activeMenu.title || '未命名菜单'}}】 要执行的操作";
				var content = $("#url").html();
				var menu = util.dialog(header, content, 'queee');
				
				$('#dialog').modal('show');
			};
			$scope.saveMenuAction = function(){
				$('#dialog').modal('hide');
			};
			$scope.saveMenu = function(){
				var menus = $scope.menus;
				if(menus.length > 3) {
					util.message('不能输入超过 3 个主菜单才能保存.', '', 'error');
					return;
				}
				var error = {empty: false, message: ''};
				angular.forEach(menus, function(val, key){
					if(val.subMenus.length > 0) {
						angular.forEach(val.subMenus, function(v, k){
							if($.trim(v.title) == '') {
								this.empty = true;
							}
							if((v.type == 'url' && $.trim(v.url) == '') || (v.type == 'forward' && $.trim(v.forward) == '')) {
								this.message += '菜单【' + val.title + '】的子菜单【' + v.title + '】未设置操作选项. <br />';
							}
						}, error);
					} else {
						if((val.type == 'url' && $.trim(val.url) == '') || (val.type == 'forward' && $.trim(val.forward) == '')) {
							this.message += '菜单【' + val.title + '】不存在子菜单并且未设置操作选项. <br />';
						}
					}
					
					if($.trim(val.title) == '') {
						this.empty = true;
					}
				}, error)
				if(error.empty) {
					util.message('存在未输入名称的菜单.', '', 'error');
					return;
				}
				if(error.message) {
					util.message(error.message, '', 'error');
					return;
				}
				var params = {};
				params.menus = angular.copy($scope.menus);
				params.method = 'save';
				$http.post(location.href, params).success(function(dat, status){
					if(dat != 'success') {
						util.message(dat.message, '', 'error');
					} else {
						util.message('菜单保存成功. ', location.href);
					}
				});
				return;
				$('#do').val(ret.data);
				$('#form')[0].submit();
			};
			
			$scope.removeMenu = function(){
				var params = {};
				params.method = 'remove';
				$http.post(location.href, params).success(function(dat, status){
					util.message(dat.message, dat.redirect, dat.type);
				});
			};
			$scope.refreshMenu = function(){
				var params = {};
				params.method = 'refresh';
				$http.post(location.href, params).success(function(dat, status){
					util.message(dat.message, dat.redirect, dat.type);
				});
			};
		});
		angular.bootstrap(document, ['app']);
		
		$(function(){
			$('.designer').sortable({handle: '.fa.fa-arrows'});
			$('#dialog').modal({backdrop: 'static', keyboard: false, show: false});
		});
	});
</script>
<style type="text/css">
	.table-striped td{padding-top: 10px;padding-bottom: 10px}
	a{font-size:14px;}
	a:hover, a:active{text-decoration:none; color:red;}
	.hover td{padding-left:10px;}
</style>
<div class="main">
	<div class="ng-cloak" ng-controller="menuDesigner">
		<div class="page-header">
			<h4>菜单设计器 <small>编辑和设置公众号菜单, 必须自定义菜单权限。</small></h4>
		</div>
		<div class="table-responsive">
			<table class="table table-hover">
				<tbody class="designer">
					<tr class="hover" ng-repeat="menu in menus">
						<td>
							<div>
								<input type="text" class="form-control" style="display:inline-block;width:300px;" ng-model="menu.title"> &nbsp; &nbsp;
								<a href="javascript:;" class="fa fa-arrows" title="拖动调整此菜单位置"></a> &nbsp;
								<a href="javascript:;" ng-click="setAction(menu);" class="fa fa-edit" title="设置此菜单动作"></a> &nbsp;
								<a href="javascript:;" ng-click="deleteMenu(menu)" class="fa fa-times-circle" title="删除此菜单"></a> &nbsp;
								<a href="javascript:;" ng-click="addSubMenu(menu);" title="添加子菜单" class="fa fa-plus-circle" title="添加菜单"></a>
							</div>
							<div class="designer">
								<div ng-repeat="sub in menu.subMenus" style="margin-top:20px;padding-left:80px;background:url('./resource/images/bg_repno.gif') no-repeat -245px -545px;">
									<input type="text" class="form-control" style="display:inline-block;width:220px;" ng-model="sub.title"> &nbsp; &nbsp;
									<a href="javascript:;" class="fa fa-arrows" title="拖动调整此菜单位置"></a> &nbsp;
									<a href="javascript:;" ng-click="setAction(sub);" class="fa fa-edit" title="设置此菜单动作"></a> &nbsp;
									<a href="javascript:;" ng-click="deleteMenu(menu, sub);" class="fa fa-times-circle" title="删除此菜单"></a>
								</div>
							</div>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
		<div class="well well-small" style="margin-top:20px;">
			<a href="javascript:;" ng-click="addMenu();">添加菜单 <i class="fa fa-plus-circle" title="添加菜单"></i></a> &nbsp; &nbsp; &nbsp;  <span class="help-inline">可以使用 <i class="fa fa-arrows"></i> 进行拖动排序</span>
		</div>

		<div class="page-header">
			<h4>操作 <small>设计好菜单后再进行保存操作</small></h4>
		</div>
		<div class="form form-horizontal">
			<div class="form-group">
				<label class="col-xs-12 col-sm-2 col-md-2 col-lg-1 control-label">支持的公众号</label>
				<div class="col-sm-10">
					<div class="checkbox">
						{loop $accs $acc}
						<label>
							{if $acc['level'] >= 1}
							<i class="fa fa-check-square-o"> &nbsp; {$acc['name']}</i>
							{else}
							<i class="fa fa-square-o"> &nbsp; {$acc['name']} (权限不足)</i>
							{/if}
						</label>
						{/loop}
					</div>
				</div>
			</div>
			<div class="form-group">
				<div class="col-xs-12 col-sm-10 col-md-10 col-lg-11">
					<input type="button" value="保存菜单结构" class="btn btn-primary" ng-click="saveMenu();"/>
					<span class="help-block">菜单设计完成将在所有支持的公众号上生效. 成功保存当前菜单结构至公众平台后, 由于缓存可能需要在24小时内生效</span>
				</div>
			</div>
			<div class="form-group">
				<div class="col-xs-12 col-sm-10 col-md-10 col-lg-11">
					<input type="button" value="删除" class="btn btn-primary" ng-click="removeMenu();" />
					<div class="help-block">清除自定义菜单</div>
				</div>
			</div>
			<div class="form-group">
				<div class="col-xs-12 col-sm-10 col-md-10 col-lg-11">
					<input type="button" value="刷新" class="btn btn-primary" ng-click="refreshMenu();" />
					<div class="help-block">重新从公众平台获取菜单信息</div>
				</div>
			</div>
		</div>
		<div id="dialog" class="modal fade">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
						<h3>选择菜单 【{{activeMenu.title || '未命名菜单'}}】 要执行的操作</h3>
					</div>
					<div class="modal-body">
						<label class="radio-inline">
							<input type="radio" name="ipt" ng-model="activeMenu.type" value="url" checked="checked"> 链接
						</label>
						<label class="radio-inline">
							<input type="radio" name="ipt" ng-model="activeMenu.type" value="forward"> 模拟关键字
						</label>
						<hr />
						<div ng-show="activeMenu.type == 'url';">
							<input class="form-control" id="ipt-url" type="text" ng-model="activeMenu.url" />
							<span class="help-block">指定点击此菜单时要跳转的链接（注：链接需加http://）</span>
							<span class="help-block"><strong>注意: 由于接口限制. 如果你没有网页oAuth接口权限, 这里输入链接直接进入微站个人中心时将会有缺陷(有可能获得不到当前访问用户的身份信息. 如果没有oAuth接口权限, 建议你使用图文回复的形式来访问个人中心)</strong></span>
						</div>
						<div ng-show="activeMenu.type == 'forward';">
							<input class="form-control" id="ipt-forward" type="text" ng-model="activeMenu.forward"/>
							<span class="help-block">指定点击此菜单时要执行的操作, 你可以在这里输入关键字, 那么点击这个菜单时就就相当于发送这个内容至微擎系统</span>
							<span class="help-block"><strong>这个过程是程序模拟的, 比如这里添加关键字: 优惠券, 那么点击这个菜单是, 微擎系统相当于接受了粉丝用户的消息, 内容为"优惠券"</strong></span>
						</div>
					</div>
					<div class="modal-footer">
						<a href="javascript:;" ng-click="saveMenuAction();" class="pull-right btn btn-primary span2" data-dismiss="modal">保存</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
{template 'common/footer'}
